<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3应用的代码结构</title>
</head>
<body>

<div id="app">

    <button @click=" msg = msg + '大家好！' ">按钮</button>

    {{msg}}

</div>

<script src="js/vue.global.js" ></script>

<script>
    //创建了Vue对象的构造配置
    const app = {

        //setup方法的返回对象（其中有数据和方法）将和视图产生联动关系
        //setup方法会在视图初始化阶段执行
        setup(){

            //ref函数就是一个响应式包装函数，可以把数据包装为响应式的数据
            const msg = Vue.ref("");

            return {
                msg,//响应式数据必须导出才可以与视图联动
            };
        }
    };

    //创建Vue对象，并将Vue对象与指定的视图元素绑定
    Vue.createApp(app).mount('#app');


</script>

</body>
</html>